<template>
  <div class="w-full">
    <div class="grid grid-cols-6 gap-4 text-xs leading-normal text-center">
      <div class="w-full py-2 bg-gray-100 border border-transparent border-solid rounded-md dark:bg-dark-3"
        :class="{ ' !border-blue-500': model == code }" v-for="({ name, icon, code }, idx)  in types"
        @click="handler(code)">
        <ElIcon size="24px">
          <component :is="icon"></component>
        </ElIcon>
        <div>{{ name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import types from '../data/taskTypes'

const model = defineModel();
const handler = (code: string) => {
  model.value = code;
  console.log({ code })
}
</script>

<style></style>
